<template>
  <div :id="chartId" :style="{ width: width, height: height }"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    chartId: {
      type: String,
      required: true
    },
    width: {
      type: String,
      default: '483px'
    },
    height: {
      type: String,
      default: '300px'
    },
    options: {
      type: Object,
      required: true
    }
  },
  watch: {
    options: {
      deep: true,
      handler(newOptions) {
        this.updateChart(newOptions);
      }
    }
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.chartId));
      this.chart.setOption(this.options);
    },
    updateChart(options) {
      if (this.chart) {
        this.chart.setOption(options);
      }
    },
    disposeChart() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
    }
  }
};
</script>

<style scoped>
/* 您可以在这里添加样式 */
</style>